<template>
	<view class="data">
		<!-- <view class="data-item data-item-1">
			<tabs :list="tab1" v-model="tab1Active" :flex="true" itemColor="#FFFFFF" lineColor="#FFF" @input="selectTab($event,1)"></tabs>
			<view class="data-item-1-box" v-if="tab1Active==0">
				<view class="data-item-1-box-tit">总资产（累计业绩）</view>
				<view class="data-item-1-box-all-money">
					<navigator url="/pages/data/order-data?time=month" class="navigator">
						<text>￥<text>{{MoneyMounth.all.price}}</text></text>
						<image src="https://master.shengejiaju.cn/web/static/icons/ico_more_data@2x.png"></image>
					</navigator>
				</view>
				<view class="data-item-1-box-compared-money">
					<text>本月业绩{{MoneyMounth.month.price}}元</text>
					<text>上月业绩{{MoneyMounth.last_month.price}}元</text>
				</view>
				<view class="data-item-1-box-list">
					<view>
						<navigator url="/pages/data/order-data">
							<text>累计利润</text>
							<text>{{MoneyMounth.all.profit}}<text>元</text></text>
						</navigator>
					</view>
					<view>
						<navigator url="/pages/data/order-data?time=month">
							<text>本月利润</text>
							<text>{{MoneyMounth.month.profit}}<text>元</text></text>
						</navigator>
					</view>
					<view>
						<navigator url="/pages/data/order-data?time=lastMonth">
							<text>上月利润</text>
							<text>{{MoneyMounth.last_month.profit}}<text>元</text></text>
						</navigator>
					</view>
				</view>
			</view>
			<view class="data-item-1-box"v-else>
				<view class="data-item-1-box-tit">总资产（累计业绩）</view>
				<view class="data-item-1-box-all-money">
					<navigator url="/pages/data/order-data?time=year" class="navigator">
						<text>￥<text>{{MoneyYear.all.price}}</text></text>
						<image src="https://master.shengejiaju.cn/web/static/icons/ico_more_data@2x.png"></image>
					</navigator>
				</view>
				<view class="data-item-1-box-compared-money">
					<text>本年业绩{{MoneyYear.year.price}}元</text>
					<text>上年业绩{{MoneyYear.last_year.price}}元</text>
				</view>
				<view class="data-item-1-box-list">
					<view>
						<navigator url="/pages/data/order-data">
							<text>累计利润</text>
							<text>{{MoneyYear.all.profit}}<text>元</text></text>
						</navigator>
					</view>
					<view>
						<navigator url="/pages/data/order-data?time=year">
							<text>本年利润</text>
							<text>{{MoneyYear.year.profit}}<text>元</text></text>
						</navigator>
					</view>
					<view>
						<navigator url="/pages/data/order-data?time=lastYear">
							<text>上年利润</text>
							<text>{{MoneyYear.last_year.profit}}<text>元</text></text>
						</navigator>
					</view>
				</view>
			</view>
		</view>
		<view class="data-item data-item-white data-item-2">
			<view class="data-item-tit">
				<view class="tit-name">今日营收</view>
				<view class="tit-more">
					<navigator url="/pages/data/order-data?time=today">
						详情<image src="https://master.shengejiaju.cn/web/static/icons/ico_more_home@2x.png"></image>
					</navigator>
				</view>
			</view>
			<view class="data-item-list col-2">
				<view>
					<text>今日业绩</text>
					<text class="orange">{{MoneyDay.today.price}}<text>元</text></text>
				</view>
				<view>
					<text>今日利润</text>
					<text class="orange">{{MoneyDay.today.profit}}<text>元</text></text>
				</view>
			</view>
			<view class="data-item-tit">
				<view class="tit-name">昨日营收</view>
				<view class="tit-more">
					<navigator url="/pages/data/order-data?time=yesterday">
					详情<image src="https://master.shengejiaju.cn/web/static/icons/ico_more_home@2x.png"></image>
					</navigator>
				</view>
			</view>
			<view class="data-item-list col-2">
				<view>
					<text>昨日业绩</text>
					<text class="blue">{{MoneyDay.yesterday.price}}<text>元</text></text>
				</view>
				<view>
					<text>昨日利润</text>
					<text class="blue">{{MoneyDay.yesterday.profit}}<text>元</text></text>
				</view>
			</view>
		</view> -->
		<view class="data-item data-item-white data-item-3">
			<view class="data-item-tit">
				<view class="tit-name">订单数据</view>
				<!-- <view class="tit-more">详情<image src="https://master.shengejiaju.cn/web/static/icons/ico_more_home@2x.png"></image></view> -->
			</view>
			<tabs :list="tab2" v-model="tab2Active" @input="selectTab($event,2)"></tabs>
			<template v-if="tab2Active==0">
				<view class="data-item-list col-3">
					<view>
						<text>订单总数</text>
						<text>{{dayOrder.today.all}}</text>
					</view>
					<view>
						<text>订单成交数</text>
						<text>{{dayOrder.today.succeed}}</text>
					</view>
					<view>
						<text>订单成交率</text>
						<text class="orange">{{dayOrder.today.rate}}</text>
					</view>
					<view>
						<text>昨日订单总数</text>
						<text>{{dayOrder.yesterday.all}}</text>
					</view>
					<view>
						<text>昨日订单成交数</text>
						<text>{{dayOrder.yesterday.succeed}}</text>
					</view>
					<view>
						<text>昨日订单成交率</text>
						<text class="blue">{{dayOrder.yesterday.rate}}</text>
					</view>
				</view>
			</template>
			<template v-if="tab2Active==1">
				<view class="data-item-list col-3">
					<view>
						<text>订单总数</text>
						<text>{{weekOrder.week.all}}</text>
					</view>
					<view>
						<text>订单成交数</text>
						<text>{{weekOrder.week.succeed}}</text>
					</view>
					<view>
						<text>订单成交率</text>
						<text class="orange">{{weekOrder.week.rate}}</text>
					</view>
					<view>
						<text>上周订单总数</text>
						<text>{{weekOrder.last_week.all}}</text>
					</view>
					<view>
						<text>上周订单成交数</text>
						<text>{{weekOrder.last_week.succeed}}</text>
					</view>
					<view>
						<text>上周订单成交率</text>
						<text class="blue">{{weekOrder.last_week.rate}}</text>
					</view>
				</view>
			</template>
			<template v-if="tab2Active==2">
				<view class="data-item-list col-3">
					<view>
						<text>订单总数</text>
						<text>{{monthOrder.month.all}}</text>
					</view>
					<view>
						<text>订单成交数</text>
						<text>{{monthOrder.month.succeed}}</text>
					</view>
					<view>
						<text>订单成交率</text>
						<text class="orange">{{monthOrder.month.rate}}</text>
					</view>
					<view>
						<text>上月订单总数</text>
						<text>{{monthOrder.last_month.all}}</text>
					</view>
					<view>
						<text>上月订单成交数</text>
						<text>{{monthOrder.last_month.succeed}}</text>
					</view>
					<view>
						<text>上月订单成交率</text>
						<text class="blue">{{monthOrder.last_month.rate}}</text>
					</view>
				</view>
			</template>
			<template v-if="tab2Active==3">
				<view class="data-item-list col-3">
					<view>
						<text>订单总数</text>
						<text>{{yearOrder.year.all}}</text>
					</view>
					<view>
						<text>订单成交数</text>
						<text>{{yearOrder.year.succeed}}</text>
					</view>
					<view>
						<text>订单成交率</text>
						<text class="orange">{{yearOrder.year.rate}}</text>
					</view>
					<view>
						<text>上年订单总数</text>
						<text>{{yearOrder.last_year.all}}</text>
					</view>
					<view>
						<text>上年订单成交数</text>
						<text>{{yearOrder.last_year.succeed}}</text>
					</view>
					<view>
						<text>上年订单成交率</text>
						<text class="blue">{{yearOrder.last_year.rate}}</text>
					</view>
				</view>
			</template>
		</view>
		<view class="data-item data-item-white data-item-4">
			<view class="data-item-tit">
				<view class="tit-name">用户动态</view>
				<view class="tit-more">
					<navigator url="/pages/data/user-data">详情<image src="https://master.shengejiaju.cn/web/static/icons/ico_more_home@2x.png"></image></navigator>
				</view>
			</view>
			<tabs :list="tab3" v-model="tab3Active" @input="selectTab($event,3)"></tabs>
			<navigator url="/pages/data/user-data">
				<template v-if="tab3Active==0">
					<view class="data-item-list col-2">
						<view>
							<text>新增用户数</text>
							<text>{{dayUser.today.all}}</text>
						</view>
						<view>
							<text>活跃用户数</text>
							<text class="orange">{{dayUser.today.succeed}}</text>
						</view>
						<view>
							<text>昨日新增用户数</text>
							<text>{{dayUser.yesterday.all}}</text>
						</view>
						<view>
							<text>昨日活跃用户数</text>
							<text class="blue">{{dayUser.yesterday.succeed}}</text>
						</view>
					</view>
				</template>
				<template v-if="tab3Active==1">
					<view class="data-item-list col-2">
						<view>
							<text>新增用户数</text>
							<text>{{weekUser.week.all}}</text>
						</view>
						<view>
							<text>活跃用户数</text>
							<text class="orange">{{weekUser.week.succeed}}</text>
						</view>
						<view>
							<text>上周新增用户数</text>
							<text>{{weekUser.last_week.all}}</text>
						</view>
						<view>
							<text>上周活跃用户数</text>
							<text class="blue">{{weekUser.last_week.succeed}}</text>
						</view>
					</view>
				</template>
				<template v-if="tab3Active==2">
					<view class="data-item-list col-2">
						<view>
							<text>新增用户数</text>
							<text>{{monthUser.month.all}}</text>
						</view>
						<view>
							<text>活跃用户数</text>
							<text class="orange">{{monthUser.month.succeed}}</text>
						</view>
						<view>
							<text>上月新增用户数</text>
							<text>{{monthUser.last_month.all}}</text>
						</view>
						<view>
							<text>上月活跃用户数</text>
							<text class="blue">{{monthUser.last_month.succeed}}</text>
						</view>
					</view>
				</template>
				<template v-if="tab3Active==3">
					<view class="data-item-list col-2">
						<view>
							<text>新增用户数</text>
							<text>{{yearUser.year.all}}</text>
						</view>
						<view>
							<text>活跃用户数</text>
							<text class="orange">{{yearUser.year.succeed}}</text>
						</view>
						<view>
							<text>去年新增用户数</text>
							<text>{{yearUser.last_year.all}}</text>
						</view>
						<view>
							<text>去年活跃用户数</text>
							<text class="blue">{{yearUser.last_year.succeed}}</text>
						</view>
					</view>
				</template>
			</navigator>
		</view>
		<!-- <view class="data-item data-item-white data-item-4">
			<view class="data-item-tit">
				<view class="tit-name">产品数据</view>
			</view>
			<tabs :list="tab4" v-model="tab4Active" @input="selectTab($event,4)"></tabs>
			<template v-if="tab4Active==0">
				<view class="data-item-list col-2">
					<view>
						<text>销售商品总数</text>
						<text>{{dayPro.today.all}}</text>
					</view>
					<view>
						<text>增加商品数</text>
						<text class="orange">{{dayPro.today.succeed}}</text>
					</view>
					<view>
						<text>昨日销售商品总数</text>
						<text>{{dayPro.yesterday.all}}</text>
					</view>
					<view>
						<text>昨日增加商品数</text>
						<text class="blue">{{dayPro.yesterday.succeed}}</text>
					</view>
				</view>
			</template>
			<template v-if="tab4Active==1">
				<view class="data-item-list col-2">
					<view>
						<text>销售商品总数</text>
						<text>{{weekPro.week.all}}</text>
					</view>
					<view>
						<text>增加商品数</text>
						<text class="orange">{{weekPro.week.succeed}}</text>
					</view>
					<view>
						<text>上周销售商品总数</text>
						<text>{{weekPro.last_week.all}}</text>
					</view>
					<view>
						<text>上周增加商品数</text>
						<text class="blue">{{weekPro.last_week.succeed}}</text>
					</view>
				</view>
			</template>
			<template v-if="tab4Active==2">
				<view class="data-item-list col-2">
					<view>
						<text>销售商品总数</text>
						<text>{{monthPro.month.all}}</text>
					</view>
					<view>
						<text>增加商品数</text>
						<text class="orange">{{monthPro.month.succeed}}</text>
					</view>
					<view>
						<text>上月销售商品总数</text>
						<text>{{monthPro.last_month.all}}</text>
					</view>
					<view>
						<text>上月增加商品数</text>
						<text class="blue">{{monthPro.last_month.succeed}}</text>
					</view>
				</view>
			</template>
			<template v-if="tab4Active==3">
				<view class="data-item-list col-2">
					<view>
						<text>销售商品总数</text>
						<text>{{yearPro.year.all}}</text>
					</view>
					<view>
						<text>增加商品数</text>
						<text class="orange">{{yearPro.year.succeed}}</text>
					</view>
					<view>
						<text>去年销售商品总数</text>
						<text>{{yearPro.last_year.all}}</text>
					</view>
					<view>
						<text>去年增加商品数</text>
						<text class="blue">{{yearPro.last_year.succeed}}</text>
					</view>
				</view>
			</template>
		</view> -->
		<view class="user-footprint"><navigator url="/pages/index/user-footprint"><text>用户浏览足迹</text></navigator></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 是否刷新
				Refresh: false,
				// tab选项卡
				tab1Active: 0,
				tab1: [{
					title: '月业绩'
				},{
					title: '年业绩'
				}],
				tab2Active: 2,
				tab2: [{
					title: '日'
				},{
					title: '周'
				},{
					title: '月'
				},{
					title: '年'
				}],
				tab3Active: 2,
				tab3: [{
					title: '日'
				},{
					title: '周'
				},{
					title: '月'
				},{
					title: '年'
				}],
				tab4Active: 2,
				tab4: [{
					title: '日'
				},{
					title: '周'
				},{
					title: '月'
				},{
					title: '年'
				}],
				// 业绩数据 年&月&日
				MoneyMounth: {
					all: {},
					last_month: {},
					month: {}
				},
				MoneyYear: {
					all: {},
					last_year: {},
					year: {}
				},
				MoneyDay: {
					all: {},
					yesterday: {},
					today: {}
				},
				// 订单数据
				dayOrder: {
					all: {},
					today: {},
					yesterday: {}
				},
				weekOrder: {
					all: {},
					week: {},
					last_week: {}
				},
				monthOrder: {
					all: {},
					month: {},
					last_month: {}
				},
				yearOrder: {
					all: {},
					year: {},
					last_year: {}
				},
				// 用户数据
				dayUser: {
					all: {},
					today: {},
					yesterday: {}
				},
				weekUser: {
					all: {},
					week: {},
					last_week: {}
				},
				monthUser: {
					all: {},
					month: {},
					last_month: {}
				},
				yearUser: {
					all: {},
					year: {},
					last_year: {}
				},
				// 产品数据
				dayPro: {
					all: {},
					today: {},
					yesterday: {}
				},
				weekPro: {
					all: {},
					week: {},
					last_week: {}
				},
				monthPro: {
					all: {},
					month: {},
					last_month: {}
				},
				yearPro: {
					all: {},
					year: {},
					last_year: {}
				}
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getMoneyMounth(2)
			this.getMoneyMounth(4)
			this.getOrderData(2)
			this.getUserData(2)
			this.getProData(2)
		},
		methods: {
			// 刷新
			refresh(){
				this.getMoneyMounth(2)
				this.getMoneyMounth(4)
				this.getOrderData(2)
				this.getUserData(2)
				this.getProData(2)
			},
			selectTab(e,type){
				switch (Number(type)){
					case 1:
						this.getMoneyMounth(e==0?2:1)
						break;
					case 2:
						let orderType = null
						if(e==0){
							orderType = 4
						}else if(e==1){
							orderType = 3
						}else if(e==2){
							orderType = 2
						}else if(e==3){
							orderType = 1
						}
						this.getOrderData(orderType)
						break;
					case 3:
						let userType = null
						if(e==0){
							userType = 4
						}else if(e==1){
							userType = 3
						}else if(e==2){
							userType = 2
						}else if(e==3){
							userType = 1
						}
						this.getUserData(userType)
						break;
					case 4:
						let proType = null
						if(e==0){
							proType = 4
						}else if(e==1){
							proType = 3
						}else if(e==2){
							proType = 2
						}else if(e==3){
							proType = 1
						}
						this.getProData(proType)
						break;
				}
			},
			// 获取年或月业绩
			getMoneyMounth(type){
				let data = {
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					day: type
				}
				this.$api.MoneyContrastData(data).then(res => {
					switch (Number(type)){
						case 1:
							this.MoneyYear = res.datas
							break;
						case 2:
							this.MoneyMounth = res.datas
							break;
						case 4:
							this.MoneyDay = res.datas
							break;
					}
				})
			},
			// 获取订单数据
			getOrderData(type){
				let data = {
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					day: type
				}
				this.$api.OrderContrastData(data).then(res => {
					switch (Number(type)){
						case 4:
							this.dayOrder = res.datas
							break;
						case 3:
							this.weekOrder = res.datas
							break;
						case 2:
							this.monthOrder = res.datas
							break;
						case 1:
							this.yearOrder = res.datas
							break;
					}
				})
			},
			// 获取用户数据
			getUserData(type){
				let data = {
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					day: type
				}
				this.$api.UserContrastData(data).then(res => {
					switch (Number(type)){
						case 4:
							this.dayUser = res.datas
							break;
						case 3:
							this.weekUser = res.datas
							break;
						case 2:
							this.monthUser = res.datas
							break;
						case 1:
							this.yearUser = res.datas
							break;
					}
				})
			},
			// 获取商品数据
			getProData(type){
				let data = {
					store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id,
					day: type
				}
				this.$api.GoodsContrastData(data).then(res => {
					switch (Number(type)){
						case 4:
							this.dayPro = res.datas
							break;
						case 3:
							this.weekPro = res.datas
							break;
						case 2:
							this.monthPro = res.datas
							break;
						case 1:
							this.yearPro = res.datas
							break;
					}
					let _this = this
					if(this.Refresh){
						setTimeout(() => {
							uni.stopPullDownRefresh({
								success(){
									_this.Refresh = false
									uni.showToast({
										icon: 'none',
										title: '刷新成功',
										duration: 1500
									})
								}
							})
						},2000)
					}
				})
			}
		},
		onPullDownRefresh() {
			this.Refresh = true
			this.tab1Active = 0
			this.tab2Active = 2
			this.tab3Active = 2
			this.tab4Active = 2
			this.refresh()
		}
	}
</script>

<style lang="scss">
	.data{
		padding: 20rpx;
		.data-item-tit{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.tit-name{
				font-size: 34rpx;
			}
			.tit-more{
				color: #999;
				font-size: 24rpx;
				image{
					width: 12rpx;
					height: 21rpx;
					margin-left: 10rpx;
				}
			}
		}
		.data-item-list{
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: solid 1px #EEE;
			&:last-child{
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom: none;
			}
			view{
				text{
					display: block;
					font-size: 26rpx;
					color: #666;
					&:first-child{
						margin-bottom: 30rpx;
					}
					&:last-child{
						font-size: 48rpx;
						color: #000;
						text{
							display: inline-block;
							font-size: 28rpx;
						}
					}
				}
				.orange{
					color: #FE9B26 !important;
					text:last-child{
						margin-bottom: 0;
						color: #FE9B26 !important;
					}
				}
				.blue{
					color: #2073F5 !important;
					text:last-child{
						margin-bottom: 0;
						color: #2073F5 !important;
					}
				}
			}
			&.col-2{
				view{
					width: 50%;
					margin-top: 50rpx;
				}
			}
			&.col-3{
				view{
					width: 33.3333%;
					margin-top: 50rpx;
				}
			}
		}
		.data-item-1{
			border-radius: 20rpx;
			background-color: #2073F5;
			padding: 10rpx 30rpx 30rpx;
			color: #FFF;
			box-shadow:0px 7rpx 12rpx 0px rgba(0,127,213,0.3);
			.data-item-1-box-tit{
				margin-top: 50rpx;
				font-size: 28rpx;
			}
			.data-item-1-box-all-money{
				.navigator{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 30rpx 0;
				}
				text{
					font-weight: bold;
					font-size: 42rpx;
					text{
						font-size: 68rpx;
					}
				}
				image{
					width: 50rpx;
					height: 50rpx;
				}
			}
			.data-item-1-box-compared-money{
				font-size: 24rpx;
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;
				border-bottom: solid 1px rgba(255,255,255,.4);
				text{
					margin-right: 80rpx;
				}
			}
			.data-item-1-box-list{
				display: flex;
				justify-content: space-between;
				text-align: center;
				view{
					&:first-child{
						text-align: left;
					}
				}
				text{
					font-size: 36rpx;
					display: block;
					text{
						display: inline-block;
						font-size: 24rpx;
					}
				}
				text:first-child{
					font-size: 24rpx;
					margin-bottom: 30rpx;
				}
			}
		}
		.data-item-white{
			background-color: #FFF;
			padding: 30rpx;
			margin-top: 20rpx;
			border-radius: 20rpx;
		}
		.data-item-3,.data-item-4{
			.data-item-tit{
				margin-bottom: 20rpx;
			}
		}
		.user-footprint{
			text-align: center;
			margin-top: 20rpx;
			text{
				display: block;
				width: 80%;
				margin: 0 auto;
				background-color: #2073F5;
				color: #FFF;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				border-radius: 50rpx;
			}
		}
	}
	/deep/ .data-item-1{
		.tabBlock{
			width: 50%;
			margin: 0 auto;
			background: none;
			.tab__item{
				color: rgba(255,255,255,.5);
				font-size: 34rpx;
			}
			.tab__item--active{
				.tab__item-title{
					color: #FFF;
				}
			}
		}
	}
	/deep/ .data-item-3{
		.tabBlock{
			margin-left: -20rpx;
			.tab__item{
				padding: 0 10rpx;
			}
		}
	}
	/deep/ .data-item-4{
		.tabBlock{
			margin-left: -10rpx;
			.tab__item{
				padding: 0 10rpx;
			}
		}
	}
</style>